<template>
    <div style="padding: 10px;">
        <a-form-model :model="config" >
            <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.calendar','日历视图')">
                <rx-input-button v-model="calendarView" :allowInput="true" @change="changeButton" @click="openCalendarView" @input="handInput"></rx-input-button>
                <a-checkbox class="formChenckbox" v-model="config.fullBtn">{{customViewI18n('fullBtn','全屏按钮')}}</a-checkbox>
            </a-form-model-item>
            <a-form-model-item :label="$ti18('rxForm.rxAlias', '别名')" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input class="formInput" v-model="config.alias"></a-input>
            </a-form-model-item>
            <a-form-model-item :label="$comi18('rxDialog.name', '标题')" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input class="formInput" v-model="config.name"></a-input>
            </a-form-model-item>
            <a-form-model-item :label="i18n('form.linkage','联动')" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-switch  v-model="config.linkage" @change="linkageChange"/>
            </a-form-model-item>
        </a-form-model>
        <a-tabs default-active-key="1" style="height: 400px">
            <a-tab-pane key="1">
                <span slot="tab">{{i18n('form.dailyView','日视图配置')}}</span>
                <a-form-model :model="config.daySetting">
                    <a-button-group class="abuttonhert" style="margin-bottom: 10px;">
                        <a-button class="abutton" @click="addColumn">
                            <i class="iconjia iconfont"></i>
                        </a-button>
                        <a-button class="abutton" @click="removeColumn">
                            <i class="icontrash iconfont"></i>
                        </a-button>
                    </a-button-group>
                    <a-table
                        :dataSource="config.daySetting.dayColumns"
                        :pagination="false"
                        :rowSelection="receiveRowSelection"
                        rowKey="idx_"
                        :bordered="true"
                    >
                        <a-table-column :title="i18n('form.field','字段')" dataIndex="key">
                            <template slot-scope="text, record">
                                <a-select
                                    v-model="record.key"
                                    :options="fieldColumns"
                                    :getPopupContainer="(p) => p.parentNode"
                                    :allowClear="true"
                                    @change="keyChange($event,record)"
                                >
                                </a-select>
                            </template>
                        </a-table-column>
                        <a-table-column :title="i18n('form.columnName','列名')" dataIndex="label">
                            <template slot-scope="text, record">
                                <a-input v-model="record.label"></a-input>
                            </template>
                        </a-table-column>
                    </a-table>
                </a-form-model>
            </a-tab-pane>
            <a-tab-pane key="2">
                <span slot="tab">{{i18n('form.clickEvent','点击事件配置')}}</span>
                <a-form-model :model="config.daySetting">
                    <a-form-model-item :label="i18n('form.mode','方式')">
                        <a-radio-group v-model="config.daySetting.mode" name="mode" >
                            <a-radio value="form">{{$ti18('rxForm.formName','表单')}}</a-radio>
                            <a-radio value="link">{{i18n('form.link','链接')}}</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.formScheme','表单方案')" v-if="config.daySetting.mode=='form'">
                        <rx-input-button v-model="config.daySetting.form" @click="selectForm" @input="handForm"></rx-input-button>

                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.onlyRead','只读')" v-if="config.daySetting.mode=='form'">
                        <a-switch  v-model="config.daySetting.readonly" />
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.popover','弹窗')" prop="isMax" v-if="config.daySetting.mode=='form'">
                        <a-radio-group v-model="config.daySetting.isMax">
                            <a-radio value="YES">{{i18n('form.fullScreen','全屏')}}</a-radio>
                            <a-radio value="NO">{{i18n('form.customSize','自定义大小')}}</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.height','高度')" prop="height" v-if="config.daySetting.mode=='form' && config.daySetting.isMax=='NO'">
                        <a-input-number  :placeholder="i18n('form.height','高度')" v-model="config.daySetting.height" :min="100" :max="1500"/>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.width','宽度')" prop="width" v-if="config.daySetting.mode=='form' && config.daySetting.isMax=='NO'">
                        <a-input-number  :placeholder="i18n('form.width','宽度')" v-model="config.daySetting.width" :min="100" :max="1500"/>
                    </a-form-model-item>
                    <a-form-model-item :label="i18n('form.link','链接')" v-if="config.daySetting.mode=='link'">
                        <a-input v-model="config.daySetting.link"></a-input>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
        </a-tabs>
        <a-tabs default-active-key="1" style="height: 470px" v-if="config.linkage">
            <a-tab-pane key="1">
                <span slot="tab"> {{i18n('form.receiveData','接收数据配置')}} </span>
                <a-form-model :model="config.receive">
                    <a-form-model-item :label="$comi18('formDef.queryParamSource', '查询参数来源')">
                        <a-select
                            default-value="url"
                            v-model="config.receive.type"
                            :options="sourceAry"
                            :getPopupContainer="(p) => p.parentNode"
                            :allowClear="true"
                        >
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="$comi18('formDef.deployeEvent', '发布事件组件')" v-if="config.receive.type == 'event'">
                        <a-select
                            v-model="config.receive.publishComponent"
                            :options="publishComponent"
                            allowClear
                            @change="changeComponent"
                            :getPopupContainer="(p) => p.parentNode"
                        >
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="$comi18('listDef.primary', '参数映射')">
                        <a-table
                            :dataSource="config.receive.mapping"
                            :pagination="false"
                            rowKey="idx_"
                            :bordered="true"
                        >
                            <a-table-column :title="$comi18('rxDialog.paramName', '参数名称')" dataIndex="name">
                                <template slot-scope="text, record">
                                    {{i18n('form.currentDate','当前日期')}}
                                </template>
                            </a-table-column>
                            <a-table-column :title="$comi18('formDef.valueSource', '值来源')" dataIndex="valueSource">
                                <template slot-scope="text, record">
                                    <a-select
                                        v-model="record.valueSource"
                                        :options="valueSourceDef"
                                        :getPopupContainer="(p) => p.parentNode"
                                        :allowClear="true"
                                    >
                                    </a-select>
                                </template>
                            </a-table-column>
                            <a-table-column :title="i18n('list.paramValue','参数值')" dataIndex="valueDef">
                                <template slot-scope="text, record">
                                    <a-select
                                        v-model="record.valueDef"
                                        :options="componentParamsDef"
                                        :allowClear="true"
                                        :getPopupContainer="(p) => p.parentNode"
                                        v-if="config.receive.type == 'event' && record.valueSource == 'param'"
                                    >
                                    </a-select>
                                    <a-select
                                        v-model="record.valueDef"
                                        :options="params"
                                        :allowClear="true"
                                        :getPopupContainer="(p) => p.parentNode"
                                        v-if="config.receive.type == 'url' && record.valueSource == 'param'"
                                    >
                                    </a-select>
                                    <a-input v-model="record.valueDef" v-if="record.valueSource == 'fixedVar'"></a-input>
                                    <a-input-group v-if="record.valueSource == 'script'" compact>
                                        <a-input v-model="record.valueDef" />
                                        <a-button @click="openScriptQuery(record)">...</a-button>
                                    </a-input-group>
                                    <a-select
                                        v-if="record.valueSource == 'constantVar'"
                                        v-model="record.valueDef"
                                        :options="constantField"
                                        allowClear
                                        :getPopupContainer="(p) => p.parentNode"
                                    ></a-select>
                                </template>
                            </a-table-column>
                        </a-table>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
            <a-tab-pane key="2">
                <span slot="tab"> {{i18n('form.publishData','发布数据配置')}}</span>
                <a-form-model-item :label="i18n('form.componentParams','组件参数')">
                    <a-table :dataSource="config.publish.paramMapping" :pagination="false" :bordered="true">
                        <a-table-column :title="$comi18('listDef.val', '值')" dataIndex="key">
                            <template slot-scope="text, record">
                                <span v-text="text"></span>
                            </template>
                        </a-table-column>
                        <a-table-column :title="i18n('form.field','字段')" dataIndex="label">
                            <template slot-scope="text, record">
                                <span v-text="text"></span>
                            </template>
                        </a-table-column>
                    </a-table>
                </a-form-model-item>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
import ComponentDef from "@/views/modules/form/core/formComponent/ComponentDef";
import PublishReceive from "@/views/modules/form/core/formComponent/PublishReceive";
import CalendarViewDialog from "@/views/modules/form/core/dialog/CalendarViewDialog"
import {Util} from "@lowcode/jpaas-common-lib"
import FormCalendarViewApi from "@/api/form/core/formCalendarView";
import DialogBox from "@/assets/js/DialogBox";
export default {
    name: "CalendarDef",
    mixins: [ComponentDef,PublishReceive],
    data() {
        return {
            config:{
                calendarKey:"",
                calendarName:"",
                calendarId:"",
                alias:"",
                name:"",
                linkage:false,
                receive: {
                    //url,event
                    type: '',
                    publishComponent: '',
                    mapping: [
                        {
                            name:"curDate",
                            valueSource:"",
                            valueDef:"",
                        }
                    ],
                },
                publish: {
                    paramMapping: [],
                },
                daySetting:{
                    dayColumns:[],
                    mode:"",
                    form:"",
                    isMax:"YES",
                    height: 350,
                    width: 650,
                    readonly:false,
                    link:""
                },
                fullBtn: false,
            },
            calendarView:"",
            fieldColumns:[],
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        init(){
            if (this.conf) {
                this.config = this.conf;
                this.calendarView = JSON.stringify({
                    value:this.config.calendarKey,text:this.config.calendarName
                });
                this.getFieldColumns(this.config.calendarId);
            }
            if(this.config.receive  && this.config.receive.publishComponent){
                this.changeComponent(this.config.receive.publishComponent)
            }
            this.publishComponent = this.getPublishOptions();
        },
        openCalendarView(){
            var self=this;
            Util.open({
                component: CalendarViewDialog,
                curVm: this,
                widthHeight: ['1000px', '600px'],
                title: self.i18n('form.calendar','日历视图'),
                data: {},
                zIndex:99999
            }, function (action,data) {
                if (action != 'ok') return;
                self.calendarView = JSON.stringify({
                    value:data.key,text:data.name
                });
                self.config.calendarKey=data.key;
                self.config.calendarName=data.name;
                self.config.calendarId=data.id;
                self.getFieldColumns(data.id);
            });
        },
        getFieldColumns(id) {
            FormCalendarViewApi.getById(id,true).then(res=>{
                if(res.success && res.data){
                    this.fieldColumns=[];
                    for (let i = 0; i < res.data.fieldColumns.length; i++) {
                        var fieldColumn=res.data.fieldColumns[i];
                        this.fieldColumns.push({
                            label:fieldColumn.fieldLabel,
                            value:fieldColumn.fieldName,
                            dataType:fieldColumn.dataType
                        })
                    }
                }
            });
        },
        changeButton(val){
            this.config.calendarName = eval("(" + val + ")").text
        },
        handInput(data) {
            if (!data) {
                this.config.calendarKey = '';
                this.config.calendarName = '';
            }
        },
        linkageChange(value){
            if(value){
                this.config.receive={
                    type: '',
                    publishComponent: '',
                    mapping: [
                        {
                            name:"curDate",
                            valueSource:"",
                            valueDef:"",
                        }
                    ],
                };
                this.config.publish.paramMapping=[
                    {
                        key:"pkId",
                        label:this.i18n('form.primaryKey','主键')
                    }, {
                        key:"curDate",
                        label:this.i18n('form.currentDate','当前日期')
                    }
                ];
            }else {
                this.config.receive={
                    type: '',
                    publishComponent: '',
                    mapping: [],
                }
                this.config.publish.paramMapping=[];
            }
        },
        addColumn(){
            this.config.daySetting.dayColumns.push({
                idx_: Util.randomId(),
                key:"",
                label:""
            })
        },
        removeColumn(){
            this.removeRows(this.config.daySetting.dayColumns, this.selectedRowKeys)
        },
        keyChange(value,record){
            this.fieldColumns.forEach(item => {
                if(item.value==value){
                    record.label=item.label;
                }
            });
        },
        selectForm(vm) {
            var self_ = this
            var config = { curVm: this, widthHeight: ['800px', '600px'], zIndex: 999999, data: { multiSelect: false } }
            DialogBox.openSoution(config, function (data) {
                if (!data) {
                    self_.$notification.warning({ message: self_.$ti18('rxMsa.tipsInfo','提示信息'), description: self_.i18n('msg.selectForm','请选择一个表单!') })
                    return
                }

                self_.$set(self_.config.daySetting,"form",JSON.stringify({text:data.name,value:data.alias}));
            })
        },
        handForm(data) {
            if (!data) {
                this.config.daySetting.form = '';
            }
        },
    },
    watch: {
        config:{
            handler: function (val, oldVal) {
                var self_ = this ;
                setTimeout(function (){
                    self_.$emit('dragclick',val);
                },500);
            },
            deep: true
        }
    }
}
</script>

<style scoped>
.formInput{
    width: 100% !important;
}
</style>